<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by cofey on 16/11/20.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>短信认证统计</title>
</head>
<body>

<div id="urHere">无线南山统一管理平台<b>></b><strong>短信认证统计</strong></div>
<div id="index" class="mainBox" style="padding-top:18px;height:auto!important;height:550px;min-height:550px;">
    <div class="indexBox">
        <div class="boxTitle">上一年短信认证情况</div>
        <ul>
            <table width="100%" border="0" cellspacing="0" cellpadding="7">
                <tr>
                    <td width="120">请求总量：</td>
                    <td><strong>${stat.requestCount}</strong></td>
                    <td width="100">发送总量：</td>
                    <td><strong>${stat.sendCount}</strong></td>
                </tr>
                <tr>
                    <td>登录总量：</td>
                    <td><strong>${stat.loginCount}</strong></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </ul>
    </div>
    <div class="indexBox">
        <div class="boxTitle">短信认证统计信息</div>
        <div class="filter">
            <table width="100%">
                <tr>
                    <%--
                    <td align="right" width="10%">热点名称:</td>
                    <td width="38%">
                        <select name="filter_hotspot" onchange="config.init();">
                            <option value="">---全部---</option>
                            <c:forEach items="${hotspots}" var="hotspot">
                                <option value="${hotspot.id}">${hotspot.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                    --%>
                    <td align="right" width="10%">时间:</td>
                    <td width="38%">
                        <select name="filter_type" onchange="config.switchDateWhere(this);">
                            <option value="1">当天</option>
                            <option value="2">按天</option>
                            <%--<option value="3">按周</option>--%>
                            <option value="4">按月</option>
                            <option value="5">按年</option>
                        </select>
                        <input type="text" readonly="readonly" class="inpMain Wdate none" name="beginDate2"
                               onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>
                        <em class="none">-</em>
                        <input type="text" readonly="readonly" class="inpMain Wdate none" name="endDate2"
                               onclick="WdatePicker({dateFmt:'yyyy-MM-dd'})"/>

                        <input type="text" readonly="readonly" class="inpMain Wdate none" name="beginDate4"
                               onclick="WdatePicker({dateFmt:'yyyy-MM'})"/>
                        <em class="none">-</em>
                        <input type="text" readonly="readonly" class="inpMain Wdate none" name="endDate4"
                               onclick="WdatePicker({dateFmt:'yyyy-MM'})"/>

                        <input type="text" readonly="readonly" class="inpMain Wdate none" name="beginDate5"
                               onclick="WdatePicker({dateFmt:'yyyy'})"/>
                        <em class="none">-</em>
                        <input type="text" readonly="readonly" class="inpMain Wdate none" name="endDate5"
                               onclick="WdatePicker({dateFmt:'yyyy'})"/>

                        <input name="submit" class="btnGray none" type="button" value="筛选" onclick="config.init();"/>
                    </td>
                </tr>
            </table>
        </div>
        <script src="${assets}/plugin/echarts/echarts.js"></script>
        <table width="100%">
            <tr>
                <td width="90%">
                    <div id="barMain" style="height:400px; margin-top: 20px;"></div>
                </td>
                <td width="10%" valign="top">
                    <b>请求次数</b>
                    <hr/>
                    <p>总量:<em name="reqTotal">0</em></p>
                    <p>峰值:<em name="reqMax">0</em></p>
                    <p>谷值:<em name="reqMin">0</em></p>
                    <p>平均值:<em name="reqAvg">0</em></p>
                    <br/>
                    <b>发送次数</b>
                    <hr/>
                    <p>总量:<em name="sendTotal">0</em></p>
                    <p>峰值:<em name="sendMax">0</em></p>
                    <p>谷值:<em name="sendMin">0</em></p>
                    <p>平均值:<em name="sendAvg">0</em></p>
                    <br/>
                    <b>发送次数</b>
                    <hr/>
                    <p>总量:<em name="loginTotal">0</em></p>
                    <p>峰值:<em name="loginMax">0</em></p>
                    <p>谷值:<em name="loginMin">0</em></p>
                    <p>平均值:<em name="loginAvg">0</em></p>
                    <hr/>
                    <b>登录请求比:<em name="loginReqRatio">0</em>%</b>
                    <hr/>
                    <b>登录发送比:<em name="loginSendRatio">0</em>%</b>
                </td>
            </tr>
        </table>
    </div>
</div>
<script type="text/javascript">
    var config = null;
    jQuery(function ($) {
        var $container = $('.mainBox');
        var $filter = $container.find('.filter');
        config = {
            init: function () {
                config.showStatistics();
            },
            switchDateWhere: function (obj) {
                var type = $(obj).val();
                if (type != '1') {
                    $(obj).siblings().addClass('none');
                    $(obj).siblings('input[name=beginDate' + type + ']').removeClass('none');
                    $(obj).siblings('input[name=endDate' + type + ']').removeClass('none');
                    $(obj).siblings('.btnGray').removeClass('none');
                } else {
                    $(obj).siblings().addClass('none');
                    config.init();
                }
            },
            showStatistics: function () {
                var hotspotId = $filter.find("select[name=filter_hotspot]").val();
                var type = $filter.find("select[name=filter_type]").val();
                var beginDate = '', endDate = '';
                if (type != '1') {
                    beginDate = $filter.find('input[name=beginDate' + type + ']').val();
                    endDate = $filter.find('input[name=endDate' + type + ']').val();
                    if (beginDate == '' || endDate == '') {
                        layer.msg("起止时间不能为空");
                        return;
                    }
                }
                $.post('${ctx}/ma/statistics/content', {
                    hotspotId: hotspotId,
                    type: type,
                    beginDate: beginDate,
                    endDate: endDate
                }, function (res) {
                    if (res.errorCode != 0) {
                        layer.msg(res.errorMessage);
                        return;
                    }
                    var data = res.result;
                    var barChart = echarts.init(document.getElementById('barMain'));
                    var barOption = {
                        title: {
                            text: data.title.text,
                            left: 'center'
                        },
                        toolbox: {
                            show: true,
                            feature: {
                                saveAsImage: {show: true}
                            },
                            right: 30
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: data.legend.data,
                            left: 60
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: [
                            {
                                type: 'category',
                                data: data.xAxis.data
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: data.series
                    };
                    barChart.setOption(barOption);

                    var series = data.series;
                    var reqData = series[0].data;
                    var sendData = series[1].data;
                    var loginData = series[2].data;

                    var reqTotal = 0;
                    for (var i = 0; i < reqData.length; i++) {
                        reqTotal += reqData[i];
                    }
                    var reqAvg = reqTotal / reqData.length;
                    $container.find("em[name=reqTotal]").text(reqTotal);
                    $container.find("em[name=reqMax]").text(Math.max.apply(null, reqData));
                    $container.find("em[name=reqMin]").text(Math.min.apply(null, reqData));
                    $container.find("em[name=reqAvg]").text(reqAvg.toFixed(2));

                    var sendTotal = 0;
                    for (var i = 0; i < sendData.length; i++) {
                        sendTotal += sendData[i];
                    }
                    var sendAvg = sendTotal / sendData.length;
                    $container.find("em[name=sendTotal]").text(sendTotal);
                    $container.find("em[name=sendMax]").text(Math.max.apply(null, sendData));
                    $container.find("em[name=sendMin]").text(Math.min.apply(null, sendData));
                    $container.find("em[name=sendAvg]").text(sendAvg.toFixed(2));

                    var loginTotal = 0;
                    for (var i = 0; i < loginData.length; i++) {
                        loginTotal += loginData[i];
                    }
                    var loginAvg = loginTotal / loginData.length;
                    $container.find("em[name=loginTotal]").text(loginTotal);
                    $container.find("em[name=loginMax]").text(Math.max.apply(null, loginData));
                    $container.find("em[name=loginMin]").text(Math.min.apply(null, loginData));
                    $container.find("em[name=loginAvg]").text(loginAvg.toFixed(2));

                    $container.find("em[name=loginReqRatio]").text(loginTotal > 0 ? parseFloat(reqTotal / loginTotal).toFixed(2) : 0);
                    $container.find("em[name=loginSendRatio]").text(loginTotal > 0 ? parseFloat(sendTotal / loginTotal).toFixed(2) : 0);
                });
            }
        }
        config.init();
    });
</script>
</body>
</html>
